$(() => {

  // 请求参数变量
  let data = {
    page: 1,
    perpage: 10,
  }

  // 业务2：获取文章列表数据
  const getList = () => {
    // 封装后，使用起来更简洁
    myAjax('GET', '/admin/article/query', data, (res) => {
      // console.log(1111111111, res)
      const htmlStr = template('article', res)
      // console.log(htmlStr)
      $('tbody').html(htmlStr)
      // 渲染分页器
      renderPager(res.data.totalCount)
    })
    // $.ajax({
    //   type: 'GET', // 请求方式
    //   url: 'http://localhost:8080/api/v1' + '/admin/article/query', // 请求地址
    //   data: {
    //     perpage: 10,
    //   }, // 请求参数
    //   headers: {
    //     Authorization: localStorage.getItem('dsj_token'),
    //   },
    //   success: (res) => {
    //     console.log('成功响应回调', res)
    //   },
    // })
  }
  getList()

  // 业务3：搜索文章
  $('#btnSearch').on('click', () => {
    // 获取搜索关键词
    const keyword = $('#aname').val().trim()
    // 业务5：获取文章类型id
    const categoryId = $('#selCategory').val()
    console.log('获取文章类型id', categoryId)
    // 业务6：获取文章状态(草稿，已发布)
    const selStatus = $('#selStatus').val()
    console.log('获取文章状态', selStatus)
    // 修改请求参数
    data = { key: keyword, type: categoryId, state: selStatus, perpage: 10 }
    // 根据新请求参数，获取文章列表
    getList()
  })

  // 业务4：下拉类别列表渲染
  const getCategoryList = () => {
    myAjax('GET', '/admin/category/list', {}, (res) => {
      // console.log(res)
      const htmlStr = template('category', res)
      // console.log(htmlStr)
      $('#selCategory').html(htmlStr)
    })
  }
  getCategoryList()

  // 业务7：删除文章 - 需要二次确认
  $('tbody').on('click', '.delete', function () {
    // layer 询问框，需要引入 layer.all.js
    layer.confirm('是否删除当前文章？', { icon: 3, title: '温馨提示' }, (index) => {
      // 获取 id，注意 this 指向
      const id = $(this).data('id')
      // console.log(id)
      // 用户点击确认，调用 ajax 请求，实现真·删除
      myAjax('post', '/admin/article/delete', { id }, (res) => {
        getList()
      })
      // 主动关闭弹出框
      layer.close(index)
    })
  })

  // 业务8：分页
  const renderPager = (count) => {
    layui.use('laypage', function () {
      var laypage = layui.laypage
      //执行一个laypage实例
      laypage.render({
        elem: 'pager', // 注意，这里的 pager 是 ID，不用加 # 号
        count: count, // 数据总数，从服务端得到
        limit: data.perpage, // 页容量
        curr: data.page,
        // jump 触发时机：初始加载分页组件时 和 点击切换分页时
        jump: function (obj, first) {
          // 判断：首次不执行，切换时才执行
          if (!first) {
            // do something
            // console.log(obj)
            // 修改请求参数的页码为当前分页的页码
            data.page = obj.curr
            // 根据新页码获取列表
            getList()
          }
        },
      })
    })
  }
})
